<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item label="统计年月" prop="ffsq">
        <el-date-picker v-model="ffsq" @change="handlePrintList" type="monthrange" align="right" value-format="yyyy-MM" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" :default-value="defalutMonth"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handlePrintList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
        <!--<el-button type="success" icon="el-icon-printer" size="mini"  v-if="tableList.length > 0"
                v-print="'#jsds'">打印</el-button>
            <el-button icon="el-icon-printer" size="mini" plain type="danger" @click="handleReportList_bsc" v-if="tableList.length > 0">导出</el-button>-->
      </el-form-item>
    </el-form>
    <div class="PrintTable" id="jsds">
      <h1>{{ beginMonth }}月-{{ endMonth }}月政务服务热线地市分类表</h1>
      <table id="myTable" style="width: auto; overflow-x: auto">
        <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
          <td v-for="header in secRowData" :key="header.keys" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
            {{ header.texts }}
          </td>
        </tr>
        <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
          <td v-for="header in thrRowData" :key="header.keys" :style="header.styles">
            {{ header.texts }}
          </td>
        </tr>
        <tr v-for="(info, index) in tableList" :key="index" style="text-align: center; height: 20px !important; font-size: 12px !important">
          <td v-for="(header, idx) in info.tableColList" :key="idx" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
            {{ header.texts }}
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { treeselect } from "@/api/hades/category/category";
import { totalcitycategorylist } from "@/api/hades/homepage/homepage";
export default {
  components: {},
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {},
      ffsq: null,
      beginMonth: "",
      endMonth: "",
      //第一行列名
      firstRowData: [],
      secRowData: [],
      thrRowData: [],
      //分类数据
      categoryOptions: [],
      //统计数据
      tableList: [],
      // 三访*********
      tableList2: [],
      // 有理访无理访表头 背影色
      youlistyle: "width:100px;background-color: #fbe2bc;",
      // 内容数据大于0 样式
      yldataGtStyle: "font-weight:bold;font-size:16px;color:red",
      dentdataGtStyle: "font-size:14px;",
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  created() {
    this.init();
    this.getCategoryList();
    this.handlePrintList();
  },
  methods: {
    init() {
      const now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let m = month < 10 ? "0" + month : month;
      let endMonth = `${year}-${m}`;
      let beginMonth = `${year}-01`;

      this.beginMonth = beginMonth;
      this.endMonth = endMonth;
      this.ffsq = [beginMonth, endMonth];
    },
    /*
     * 查询初访数据
     */
    handlePrintList() {
      if (null == this.ffsq || "" == this.ffsq) {
        this.$modal.msgError("请选择属期");
        return;
      }
      let params = {
        beginDate: this.ffsq[0],
        endDate: this.ffsq[1],
      };

      this.beginMonth = params.beginDate;
      this.endMonth = params.endDate;

      this.tableList = [];
      totalcitycategorylist(params).then((res) => {
        let tmpdata = []; //行数据
        res.data.forEach((m, mIndex) => {
          let col = [];
          col.push({ keys: "am" + m.cityName + "-" + m.deptId, texts: mIndex + 1, rowspan: "1", colspan: "1" });
          col.push({ keys: "bm" + m.cityName + "-" + m.deptId, texts: m.cityName, rowspan: "1", colspan: "1", styles: "width:500px;" });

          m.categoryList.forEach((sub, idx) => {
            let styles = this.dentdataGtStyle;
            if (sub > 0) {
              styles = this.yldataGtStyle;
            }
            col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
          });
          let rows = {
            tableColList: col,
          };
          this.tableList.push(rows);
        });
      });
    },
    /*
     * 初始化列标题数据
     */
    initTableItemData() {
      //初始化第一行列名   billMonth
      this.secRowData.push({ keys: "xh", texts: "序号", rowspan: "2", colspan: "1", styles: "width:50px;background-color: #fbe2bc;" });
      this.secRowData.push({ keys: "city", texts: "地市", rowspan: "2", colspan: "1", styles: "width:200px;background-color: #fbe2bc;" });
      //有理访分类 列数
      let yl_colspan_num = 1;
      //初始化第二行列名
      this.categoryOptions.forEach((m, mIndex) => {
        let flag = false;
        if (m.children) {
          flag = true;
        }
        if (flag) {
          let arr = {
            keys: "yl-" + m.value,
            texts: m.label,
            rowspan: "1",
            colspan: m.children.length,
            styles: this.youlistyle,
          };
          this.secRowData.push(arr);
          yl_colspan_num = yl_colspan_num + m.children.length;
          //初始化第三行数据
          m.children.forEach((sub) => {
            let signkeys = m.value + "-" + sub.value;
            this.thrRowData.push({ keys: "yl-" + sub.value, types: "yl", texts: sub.label, signkeys: signkeys, styles: this.youlistyle });
          });
        } else {
          let arr = {
            keys: "yl-" + m.value,
            texts: m.label,
            rowspan: "2",
            colspan: "1",
            styles: this.youlistyle,
          };
          this.secRowData.push(arr);
          yl_colspan_num = yl_colspan_num + 1;
        }
      });
    },
    /** 查询分类列表 */
    getCategoryList() {
      treeselect().then((response) => {
        this.categoryOptions = response.data;
        this.initTableItemData();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.init();
    },
  },
};
</script>
<style scoped>
table,
th,
td {
  border: 1px solid #999999;
}
</style>
